<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
    <script th:src="@{/webjars/jquery/1.11.1/jquery.js}"></script>
    <script th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.js}"></script>
    <script th:src="@{/webjars/vue/2.6.14/vue.js}"></script>
    <script th:src="@{/webjars/axios/0.26.0/dist/axios.js}"></script>
</head>
<body>
    <div class="container" id="app">
        <form th:action="@{/book/add}" method="post" style="width: 60%;margin: 50px auto">
            <h1>添加图书</h1>
            <div class="form-group">
                <label>书名</label>
                <input class="form-control" type="text" name="name" v-model="book.name">
            </div>
            <div class="form-group">
                <label>作者</label>
                <input class="form-control" type="text" name="author" v-model="book.author">
            </div>
            <div class="form-group">
                <label>选择类别</label>
                <select class="form-control" type="text" name="category.id" v-model="book.category.id">
                    <option th:each="category:${categories}" th:value="${category.id}" th:text="${category.name}"></option>
                </select>
            </div>
            <div class="form-group" >
                <label>初始库存</label>
                <input class="form-control" type="text" name="repository" v-model="book.repository">
            </div>
            <div class="form-group">
                <label>定价</label>
                <input class="form-control" type="text" name="price" v-model="book.price">
            </div>
            <button class="btn btn-primary">提交</button>
            <button class="btn btn-success" type="button" @click="submitAddBook">Axios提交</button>

            <a class="btn btn-link" th:href="@{/book/list}">返回列表首页</a>
        </form>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                book:{
                    name:'',
                    author:'',
                    category: {id:1},
                    repository:0,
                    price:0.0
                }
            },
            methods:{
                submitAddBook:function (){
                    alert("ajax请求");
                    axios.post("/book/add2",this.book)
                    .then(function (response){
                       if(response.data=='success')
                           alert("新书已上架");
                       else
                           alert("操作失败");
                    });
                }
            }
        });
    </script>
</body>
</html>